<template>
  <div class="enterprise-account-info-modal">
    <a-spin :loading="loading" tip="正在获取账号信息...">
      <a-result
          class="result-container"
          status="success"
          sub-title="请妥善保管以下账号信息，该信息仅展示一次"
          title="企业账号创建成功"
      >
        <template #extra>
          <a-card class="account-info-card">
            <div class="card-header">
              <icon-check-circle-fill class="success-icon"/>
              <div class="header-text">账号信息</div>
            </div>

            <a-descriptions
                :column="1"
                bordered
                class="account-descriptions"
                size="large"
            >
              <a-descriptions-item label="企业名称">
                <div class="info-item">
                  <span class="info-text">{{ params.enterpriseName }}</span>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="登录账号">
                <div class="info-item">
                  <span class="info-text">{{ params.enterpriseMobile }}</span>
                  <a-tooltip content="复制账号">
                    <a-button class="copy-btn" type="text" @click="copyMobile">
                      <icon-copy/>
                    </a-button>
                  </a-tooltip>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="登录密码">
                <div class="password-container">
                  <div class="password-display">
                    <span v-if="!showPassword" class="password-dots">••••••••</span>
                    <span v-else class="password-text">{{ password }}</span>
                  </div>
                  <div class="password-actions">
                    <a-tooltip content="查看密码">
                      <a-button
                          class="action-btn"
                          type="text"
                          @click="togglePasswordVisibility"
                      >
                        <icon-eye v-if="!showPassword"/>
                        <icon-eye-invisible v-else/>
                      </a-button>
                    </a-tooltip>
                    <a-tooltip content="复制密码">
                      <a-button class="action-btn" type="text" @click="copyPassword">
                        <icon-copy/>
                      </a-button>
                    </a-tooltip>
                  </div>
                </div>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>
        </template>
      </a-result>
    </a-spin>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, ref} from "vue";
import {getEnterpriseAccountPasswordApi} from "~/api/lindi/enterpriseAccount.js";

const {proxy} = getCurrentInstance();

// 接收父组件传递的参数
const props = defineProps({
  params: {
    type: Object,
    default: () => ({}),
  },
});

// 定义事件
const emit = defineEmits(["ok", "cancel"]);

// 密码显示状态
const showPassword = ref(false);
// 密码值
const password = ref("");
// 加载状态
const loading = ref(false);
// 确认已保存状态 - 修改为默认为 true
const confirmSaved = ref(true);

// 组件挂载时获取密码
onMounted(() => {
  if (props.params.enterpriseMobile) {
    getPassword();
  }
});

// 组件卸载时触发 ok 事件
onUnmounted(() => {
  emit("OK");
});

// 获取密码
const getPassword = () => {
  loading.value = true;
  getEnterpriseAccountPasswordApi(props.params.enterpriseMobile)
      .then((res) => {
        if (res && res.password) {
          password.value = res.password;
        } else {
          proxy.$msg.warning("未能获取企业账号密码信息");
        }
      })
      .catch((error) => {
        console.error("获取密码失败:", error);
        proxy.$msg.error("获取企业账号密码信息失败");
      })
      .finally(() => {
        loading.value = false;
      });
};

// 切换密码显示/隐藏
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};

// 复制手机号到剪贴板
const copyMobile = () => {
  if (props.params.enterpriseMobile) {
    navigator.clipboard
        .writeText(props.params.enterpriseMobile)
        .then(() => {
          proxy.$msg.success("账号已复制到剪贴板");
        })
        .catch((err) => {
          console.error("复制失败:", err);
          proxy.$msg.error("复制失败");
        });
  }
};

// 复制密码到剪贴板
const copyPassword = () => {
  if (password.value) {
    navigator.clipboard
        .writeText(password.value)
        .then(() => {
          proxy.$msg.success("密码已复制到剪贴板");
        })
        .catch((err) => {
          console.error("复制失败:", err);
          proxy.$msg.error("复制失败");
        });
  }
};

// 处理复选框变化
const handleCheckboxChange = (checked) => {
  confirmSaved.value = checked;
};

// 确定按钮处理函数
const handleOk = () => {
  emit("ok");
};
</script>

<style scoped>
.enterprise-account-info-modal {
  padding: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.result-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.account-info-card {
  width: 100%;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  background-color: var(--color-fill-2);
  border-bottom: 1px solid var(--color-border-2);
}

.success-icon {
  color: var(--color-success-6);
  font-size: 24px;
  margin-right: 12px;
}

.header-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-1);
}

.account-descriptions {
  margin: 20px 0;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
}

.info-text {
  font-size: 16px;
  font-weight: 500;
}

.password-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
}

.password-display {
  font-family: monospace;
  font-size: 18px;
  letter-spacing: 1px;
  flex: 1;
}

.password-dots {
  font-size: 20px;
  letter-spacing: 3px;
}

.password-text {
  color: var(--color-text-1);
  font-weight: 500;
}

.password-actions {
  display: flex;
  gap: 12px;
}

.action-btn,
.copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: all 0.2s;
  background-color: var(--color-fill-2);
}

.action-btn:hover,
.copy-btn:hover {
  background-color: var(--color-fill-3);
  color: var(--color-primary-6);
  transform: scale(1.05);
}

.tips-container {
  margin: 20px 24px;
}

.tips-content {
  font-size: 14px;
}

.tips-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-warning-6);
}

:deep(.arco-descriptions-item-label) {
  width: 140px;
  background-color: var(--color-fill-2);
  font-weight: 500;
  font-size: 15px;
}

:deep(.arco-descriptions-item-value) {
  padding: 20px 28px;
}

:deep(.arco-result-title) {
  color: var(--color-success-6);
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 8px;
}

:deep(.arco-result-subtitle) {
  margin-top: 8px;
  color: var(--color-text-2);
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
}

/* 调整 a-result 组件的内部样式 */
:deep(.arco-result) {
  padding: 30px 0;
}

:deep(.arco-result-icon) {
  margin-bottom: 20px;
  transform: scale(1.2);
}

/* 确保模态框内容垂直居中 */
:deep(.arco-modal-body) {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.arco-alert) {
  padding: 16px;
  border-radius: 6px;
}

:deep(.arco-alert-icon) {
  font-size: 18px;
  color: var(--color-warning-6);
}

:deep(.arco-btn-size-large) {
  padding: 0 24px;
  height: 40px;
  font-size: 16px;
}

:deep(.arco-btn-primary) {
  background-color: var(--color-success-6);
  border-color: var(--color-success-6);
}

:deep(.arco-btn-primary:hover) {
  background-color: var(--color-success-7);
  border-color: var(--color-success-7);
}
</style>
